@import url("./variable.css");
/*===========表格===========*/

.table-style{
    border-top: 1px solid var(--color-table-border) !important;
    border-right: 1px solid var(--color-table-border) !important;
    border-left: 1px solid var(--color-table-border) !important;
    /*---表格基本設定---*/
    & .el-table th, & .el-table td {
        padding: 0px !important;
        font-size: 12px;
        overflow : hidden;
        text-overflow : ellipsis;
        white-space : nowrap;
    }
    /*!*---表格身---*!*/

    /* 增加选中背景样式tr-bg */
    & tr:hover,& .tr-bg{
       background: var(--color-table-titlebackground) !important;
      }
    /*---表格td樣式---*/
    & .el-table .cell {
        padding: 6px 8px !important;
        color: var(--color-table-body);
        line-height: 24px;
        white-space: nowrap !important;
    }
    & .el-table th{
       user-select: auto;
      }
    & .el-table-column--selection .cell{
          padding: 6px 0px 6px 8px!important;
      }
    & .el-table__empty-block{
          font-size: 12px !important;
          min-height: 300px;
          background: #fff;
      }
}
.is-hidden-fixed {
    position: absolute !important;
    right: 0;
    width: 40px;
    display: none;
}
.table-style tr{
    outline: none !important;
&:hover .is-hidden-fixed {
     display: table-cell !important;}
}
/*---表格頭---*/
.table-header {
  background: var(--color-table-titlebackground) !important;
  color: var(--color-table-titlecolor) !important;
}
.min-height0.order-table {
  min-height: auto !important;
  margin: 0;
  /*border-bottom: 0px;*/
}
/*---勾選刪除表格的樣式---*/
.table-delect-header{
  background: var(--color-tableheader-background)!important;
  border-top: 1px solid var(--color-table-border) !important;
  border-right: 1px solid var(--color-table-border) !important;
  border-left: 1px solid var(--color-table-border) !important;
  padding: 6px 8px;
}
@media screen and (max-width:1023px){
    .el-button--mini{
        font-size: 14px !important;
        padding: 8px 10px!important;
    }
    .el-table th{
        user-select: none;
    }
    .el-table tr{
    &:hover{
          background: none !important;
      }
    & th + th .cell{
          padding: 6px 4px!important;

      }
    & th:last-child .cell{
          padding: 6px 6px 6px 4px  !important;
      }
    & td + td .cell{
          padding: 6px 4px!important;

      }
     & .el-table__body td + td .cell{
           background: #fff;
       }
    & td:last-child .cell{
          padding: 6px 6px 6px 4px  !important;
      }
    }
}
@media screen and (max-width:768px){
    .table-style{

        & td, th{}
        & .el-table__fixed-footer-wrapper .cell {
              line-height: 36px !important;
              padding: 6px 10px !important;
          }
        & .max-phone-width100 .cell{
              width: 100px !important;
          }
        & .max-phone-width110 .cell{
              width: 110px !important;
          }
        & .max-phone-width130 .cell{
          width: 130px !important;
          }
        & .max-phone-width150 .cell{
              width: 150px !important;
          }
        & .max-phone-width170 .cell{
              width: 170px !important;
          }
        & .max-phone-width220 .cell{
              width: 220px !important;
          }
        & .el-table__row .cell{
          background: #fff ;
          }
    }
    .el-table tr {
        & th + th .cell{
          padding: 6px 10px!important;

        }
    }
    .el-table .el-table__row .cell {
          font-size: 15px !important;
          line-height: 36px;
          padding: 6px 10px !important;
          white-space:  nowrap ;
    }
    .el-table__footer-wrapper .cell {
        font-size: 15px !important;
        line-height: 36px !important;
        padding: 6px 10px !important;
        white-space:  nowrap ;
    }
    .el-table .el-table-column--selection .cell{
        padding: 6px 0px 6px 8px!important;
    }
    .table-delect-header {
        background: none !important;
        border: none !important;
        width: 100%;
        padding: 0 ;
    }
    .el-table th.table-header,
    .el-table th{
        padding: 5px 0 !important;
        font-size: 15px!important;
    }
    /*.el-dialog__body .el-table th.table-header,*/
    /*.el-dialog__body .el-table th{*/
        /*padding: 0 !important;*/
    /*}*/
    .el-table td{
        padding: 0 !important;
    }
    .el-table,.el-form-item__label{
        font-size: 14px !important;
    }
    .el-input-number__decrease,.el-input-number__increase{
        line-height: 33px !important;
    }
    .el-table tr {
        outline: none !important;
        & .el-checkbox__inner {
              width: 14px;
              height: 14px;
              position: relative;
              top: -1.5px;
          }
    }
    .el-table th > .cell {
        font-size: 14px;
        padding: 0 10px !important;
        min-height: 26px !important;
        line-height: 26px !important;
    }
}
/*===========表格標題類型===========*/
/*手機表格細項*/
span.title-blue{
    color: var(--color-blue) !important;
}
span.title-red{
    color: var(--color-danger) !important;
}
span.title-green{
    color: var(--color-success) !important;
}
/*---表格重點藍色---*/
td.title-blue .cell{
    color: var(--color-blue) !important;
    & span{
        color: var(--color-blue) !important;
        &:after{
             background: var(--color-blue);
         }
      }
}
td.title-red .cell{
    color: var(--color-danger) !important;
    & span{
        color: var(--color-danger) !important;
        &:after{
             background: var(--color-danger);
         }
    }
}
td.title-green .cell{
     color: var(--color-success) !important;
& span{
      color: var(--color-success) !important;
&:after{
     background: var(--color-success);
 }
}
}
td.title-grey .cell{
    color: var(--color-grey) !important;
& span{
      color: var(--color-grey) !important;
&:after{
     background: var(--color-grey);
 }
}
}
/*---連結class---*/
.title-hover-effect span{
    position: relative;
    cursor: pointer;
    &:after{
         position: absolute;
         bottom: -2px;
         left: 0;
         height: 1px;
         display: initial;
         width: 0%;
         transition: all .5s;
         content: '';
     }
    &:hover{
        &:after{
             width: 100%;
         }
    }
}
.title-hover-word{
    position: relative;
    cursor: pointer;
    color: var(--color-blue);
    &:after{
        position: absolute;
        bottom: -2px;
        left: 0;
        height: 1px;
        display: initial;
        width: 0%;
        transition: all .5s;
        background: var(--color-blue);
        content: '';
    }
    &:hover{
        &:after{
             width: 100%;
         }
    }
}
/*===========表格細項目按鈕===========*/
.table-btn-style{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
}
.state-btn{
    & .el-button{
          padding: 4px 10px !important;
          height: 24px;
      }
    & .el-button + .el-button{
        margin-left: 4px;
        padding: 5px 10px !important;
    }
}
/*===========表格按鈕類型===========*/
.table-option-btn{
    & .cell{
        display: flex;
      }
    & .el-radio-button--mini .el-radio-button__inner {
        padding:  4px 10px !important;
    }
    & span{
       display: flex;
       justify-content: center;
      }
    & i{
        display: inline-block;
        font-size: 18px !important;
        line-height: 23px !important;
        cursor: pointer;
        color: var(--color-table-ibtn);
    }
    & .table-option-inner{
        display: flex;

      }
    /*文字型按鈕*/
    & .el-button--text{
       padding: 0 !important;
    }
    & .el-button + .el-button {
        margin-left: 6px;
    }
}
.table-option-inner > *{
    position: relative;
    width: 30px;
    height: 23px;
    z-index: 1;
    margin: 0 6px 0 0;
    &:after{
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         width: 0px;
         height: 0px;
         border-radius: 50%;
         z-index: -1;
         background: #eee;
         content: '';
         transition: all .3s;
     }
    &:hover:after{
         width: 30px;
         height: 30px;
     }
}
/*===========排序表格===========*/
.order-hover-effect {
      position: relative;
      cursor: pointer;
      color: var(--color-blue) !important;
      &:after{
             background: var(--color-blue);
             position: absolute;
             bottom: 0px;
             left: 0;
             height: 1px;
             display: initial;
             width: 0%;
             transition: all .5s;
             content: '';
         }
    &:hover:after{
         width: 100%;
     }
}

/*===========表格可能超出class===========*/
.overflow-content{
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}



/*===========排序表格===========*/
.order-table{
    min-height: calc(100vh - 250px);
    border: 1px solid var(--color-table-border);
    padding: 0;
    position: relative;
    & .el-checkbox__label{
          display: none !important;
      }
    /*已被選*/
    & .order-selected{
          background: #fbf5e2;
    }
    /*表頭*/
    & .order-table-header{
          background: var(--color-table-titlebackground);
      }
    & li{
          position: relative;
          display: flex;
          border-bottom: 1px solid var(--color-table-border);
          & > div{
              padding: 6px 10px !important;
              line-height: 23px;
              & .el-icon-rank{
                 font-size: 18px;
                 color: #8c8686;
                }
           }
    }
    /*每行*/
    & .order-selected,& .order-unselected{
        &:hover {
        background: var(--color-table-titlebackground);
        }
     }
    & .order-selected{
          cursor: all-scroll;
    }

    & .order-right{
      display: flex;
      & .order-btn{
          width: 28px;
      }
      & .order-times{
          width: 160px;
      }
     }
    & .order-space{
          height: 23px;
      }
    & .order-id{
          width: 25px;
          padding: 6px 0px 6px 10px !important;
      }
    & .order-bankaccount{ width: 300px;}
    & .order-name{ width: 300px;}
    & .order-level{
          width: 430px;
      }
    & .order-bankname{
          width: 220px;
      }
}
.order-payment-table{
    & .order-bankaccount{ width: 220px;}
    & .order-name{ width: 220px;}
    & .order-bankaccount{ width: 200px;}
    & .order-name{ width: 200px;}
   & .order-table .order-level{
      line-height: 16px;
         width: 530px;
   }
   & li {
     display: flex;
     justify-content: flex-start;
     align-items: center;
    & .order-right{
      position: absolute;
      right: 0;
      align-items: center;
      }
    & .order-btn{
      display: flex;
      justify-content: center;
      align-items: center;
      }
    & > div {
    line-height: 28px;
    padding: 4px 10px !important;
    }
   }
}
.order-table-four.order-table{
    & .order-bankaccount{ width: 400px;}
    & .order-level{ width: 600px;}
}
.order-table-charge.order-table{
    & li {
          justify-content: space-between;
      }
    & .order-state{ width: 200px}
}
/*無數據style*/
.table-empty{
    width: 100%;
    height: calc( 100% - 36px);
    display: flex;
    align-items: center;
    position: absolute;
    top: 36px;
    background: #fff;
    text-align: center;
    & span{
      width: 100%;
      }
}
/*手機版選中style*/
.bank-selected{
    background: #fbf5e2!important;
}
.bank-selected .cell{
    background: #fbf5e2!important;
}
@media screen and (min-width:1800px){
    .order-table-bank.order-table, .order-table{
        & .order-level{ width: auto; min-width: 800px}
    }
}
@media screen and (max-width:768px){
    .title-hover-effect span:hover:after{
         width: 0%;
     }
    ul.order-table{
        margin: 0;
        width: 100%;
        & li{
           padding: 7.5px 10px;
          }
    }
    .order-name{
        color: var(--color-blue);
        font-size: 14px;
        font-weight: bold;
    }
    .order-btn{
        position: absolute;
        width: 20px;
        right: 20px;
        top: 50%;
        transform: translate(0 , -50%);
        cursor: all-scroll;
    }
}
.order-table-style{
    & ul{
          margin: 0 !important;
          padding: 0 !important;
    & li{
          border: none;
          border-bottom: 1px solid var(--color-table-border);
          transition: all .5s;
          min-height: 23px;
          line-height: 23px;
          display: flex;
      }
    }
    & .table-header{
          border-bottom: 1px solid var(--color-table-border);
      }
    & .id{
          width: 32px;
      }
    & .order{
          width: 50px;
      }
    & .activty-name{
          width: 435px;
      }
    & .type{
          width: 162px;
      }
    & .status{
          width: 162px;
      }
    & .addtime{
          width: 170px;
      }
    & .option{
          width: 252px;
      }
    & i.el-icon-rank{
          cursor: all-scroll;
          font-size: 1.125rem;
          color: var(--color-icon);
      }
}

.order-line{
    overflow : hidden;
    text-overflow : ellipsis;
    white-space : nowrap;
}

/*＝＝＝＝＝＝＝ 綜合報表 ＝＝＝＝＝＝＝＝＝＝＝*/


.report-data{
    border: none;
    & .hoverline-effet{
          line-height: 16px !important;
      }
    & .cursor-style:hover{
    & .color-blue{
          opacity: 0.7;
      }
    }
    }
    li{
        list-style: none;
    }
    ul{
        margin: 0;
    }
    .compound-header{
        display: flex;
        margin: 0 0 20px 0;
    & li{
          width: 100%;
          border: 1px solid var(--color-table-border);
          display: inline-flex;
          justify-content: flex-start;
          align-items: center;
          margin: 0 10px 0 0;
          background: #fff;
    &:last-child{
         margin: 0;
     }
    }
    & li:first-child{
        & .icon-ball{
              background: #58b3ef;
          }
    }
    & li:nth-child(2){
        & .icon-ball{
              background: #ee8470;
          }
    }
    & li:nth-child(3){
        & .icon-ball{
              background: #91c58a;}
    }
    & li:nth-child(4){
        & .icon-ball{
              background: #f6d467;}
    }
    & .inner-content{
        & span{
              display: block;
          }
        & span:last-child{
              font-size: 16px;
          }
    }
    & .icon-ball{
          width: 50px;
          height: 50px;
          display: flex;
          color: #fff;
          margin: 20px 20px 20px 10px;
          justify-content: center;
          align-items: center;
            & i{
                  font-size: 25px !important;
              }
    }
    }

    .compound-content{
        display: flex;
    & .compound-items{
          width: 100%;
          border: 1px solid var(--color-table-border);
      }
    }
    .compound-smalltitle{
        & li{
              padding: 10.5px 6px 10.5px 27px!important;
              background: #f2f2f2;

        &:first-child,&:nth-child(5),&:nth-child(9){
        & i{
              background: #58b3ef;

          }
        }
        &:nth-child(2n){
             background: #fafaf5;
        & i{
              background: #8cc63f;
          }
        }
        &:nth-child(2),&:nth-child(6){
        & i{
              background: #ee8470;
          }
        }
        &:nth-child(3),&:nth-child(7){
        & i{
              background: #91c58a;
          }
        }
        &:nth-child(4),&:nth-child(8){
        & i{
              background: #f6d467;
          }
        }
        }
        & i{
              width: 10px;
              height: 10px;
              margin: 0 10px 0 0;
              display: inline-block;
          }
    }
    .compound-title{
        border-bottom: 1px solid var(--color-table-border);
        padding: 10px 20px;
        background: #fff;
        & span:first-child{
              min-width: 67px;
              display: inline-block;
          }
    }
    .compound-smalltitle span:first-child,.title-span{
        width: 67px;
        display: inline-block;
    }
    .bottom-line{
        position: relative;
    &:after{
         position: absolute;
         content: '';
         width: 100%;
         height: 1px;
         background: var(--color-table-border);
         bottom: 0;
         left: 0;
     }
    }
    span.color-blue.cursor-style{
        width: auto !important;
    }
    .pophover-table{
        border: 1px solid var(--color-table-border);
    }
    .report-header{
        position: relative;
    }

    .report-moadal .table-style{
        border-right: 1px solid var(--color-table-border);
        border-left: 1px solid var(--color-table-border);
        border-top: 1px solid var(--color-table-border);
    }
    @media screen and (max-width:1023px){
        .compound-header{
            margin: 0 0 var(--outer-margin) 0;
            & li{
                  padding: 15px 0;
                  margin: 10px;
                  flex-direction: column;
            & .inner-content{
                  text-align: center;
              }
            &:last-child{
                 margin: 10px;
             }
            }
            & span{
                  font-size: 14px;
              }
        }
        .compound-content{
             font-size: 14px;
         }
    }

    @media screen and (max-width:768px){
        .compound-header .icon-ball{
            padding: 5px;
            width: 35px;
            height: 35px;
            margin: 10px 15px 10px 10px;
        }
        .compound-smalltitle{
            & li{
                  padding: 10.5px 0 10.5px 20px!important;}
        }
        .search-header{
            height: auto !important;
        }
        .el-form--inline .el-form-item{
            margin-bottom: 6px !important;
        }
    }

@media screen and (max-width:700px){
    .compound-header{
        flex-wrap: wrap;
        & li{
              flex-direction: row;
              margin-bottom: 6px;
            & .inner-content{
                  text-align: left;
              }
        }
    }
}
@media screen and (max-width: 650px){
    #compound-content {
        overflow: scroll;
    }
    .compound-header li{
        margin: 6px 0 0 0 !important;
        width: 100%;
        border-width: 1px 0;
    }
    .compound-content{
        width: fit-content;
        /*flex-direction: column;*/
    }
    .compound-smalltitle{
        & li{
              padding: 10.5px 0 10.5px 25px!important;}
    }
    .compound-content .compound-items{
        border-top: 1px solid var(--color-table-border);
        width: 320px;
        background: #fff;
    }
    .compound-smalltitle span:first-child,.title-span{
        width: 100px;
    }
    .compound-title span:first-child{
        width: 100px;
    }
    .report-header {
        position: relative;
        padding: 10px 10px 30px 10px;
    }
}

/*大數據 用戶報表 ／遊戲報表*/
.Amount-negative .profitAmount .cell,
.profit-negative  .profit .cell{
    color: var(--color-success) !important;
}
.Amount-non-negative .profitAmount .cell,
.profit-non-negative .profit .cell{
    color: var(--color-danger) !important;
}

/*遊戲彈窗*/
.game-table-style{
   & .el-table__body td .cell {
    line-height: 38px;}
}
.table-green-bg .el-table tr {
    background-color: var(--color-green-bg);
}

.text-right .cell{
    text-align: right;
}
.ul-form-style{
    font-size: 12px;
    background: var(--color-green-bg);
    & li{
          display: flex;
          border-bottom: 1px solid var(--color-table-border);
    & >div{
          width: 33.33%;
          line-height: 24px;
          padding: 6px 10px;}
    }
    & .text-right{
          text-align: right;
      }
}
.greenbg-form-style {
    background: var(--color-green-bg);
}

/*彈窗 頁碼*/
.form-page-style{
    padding: 5px;
    font-size: 12px;
    text-align: center;
& .el-pagination__total{
      font-size: 12px !important;
  }
& .el-pagination {
      padding: 0;}
  & .el-pager{
     line-height: 26px;
     height: 26px;
     display: inline-flex;
     align-items: center;
    }
  & .number{
    min-width: 20px !important;
    height: 20px;
    line-height: 20px;

    }
}
/*活動*/
.activity-order-table{
    border-bottom: none;
    min-height: auto;
    & .table-empty{
      position: relative;
      height: 250px;
      border-bottom: 1px solid #eee;
      top: auto;
      }
    & li{
    background: #fff;
      }
    & .activity-id{
        &.lid{
            display:flex;
            & label{
                display:flex;
                align-items: center;
                justify-content: center;
            }
        }
    }
    & .activity-name{
          width: 35%;
          min-width: 250px;
          padding-right: 10px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
        &.tname{
            width:5%;
            min-width: 100px;
        }
      }
    & .activity-type{
          width: 13%;
          min-width: 130px;
      }
    & .activity-statue{
          width: 13%;
          min-width: 100px;
      }
    & .activity-level{
          width: 30%;
          min-width: 400px;
      }
    & .activity-time{
          width: 20%;
          min-width: 170px;
          &.ttime{
              width:15%;
              min-width:130px;
          }
        }
    & .activity-option{
          width: 10%;
          min-width: 130px;
      }
    & .activity-order{
          position: absolute;
          right: 0;
          padding: 6px 10px;
          &.torder{
              height: 100%;
          }
      }
    & .flexBox{
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
}
